<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title> Mapping Project </title>

<script type="text/javascript">

/**
 * Variable declarations
 */

var listTest = "list";
var p_prop = "prop";
var p_wsid = "wsid";
var p_key = "key";
var param_MasterKey = "tNOLLtW-eU8hSLavNFJAViA";
var param_MasterwsID = "od6";
var param_wsId = "od6";
var param_ssKey = "";
var param_useSidebar = false;
var param_titleColumn = "project";
var param_descriptionColumn = "description";
var param_department = "department";
var param_collaborators = "collaborators";
var param_extramarkers = "markerplus";
var param_linkColumn = "link";
var param_extraInfo = "extrainfo";
var param_imageColumn = "image";
var param_imageDes = "desimage";
var param_latColumn = "latitude";
var param_lngColumn = "longitude";
var param_rankColumn = "";
var param_iconType = "green";
var param_iconOverType = "orange";
var usingRank = false;
var jsoncurrent;
var keyArray = [];
var nameArray = [];
var wsidArray = [];
var mKeyLength = 0;
var markerSL;
var keyword = "";
var depword = "";
var depBounds;
var searchBounds;
var searchOn = new Boolean("true")

/**
 * Resets the map
 */
function mapreset() {

param_ssKey = "";
mysearchfield.value="Search for a project...";
cm_load();

}
/**
 * Runs required functions
 */
function begin() {
getMasterJson();
}
/**
 * Loads ALL JSOn feeds into the array
 */
function setArray(json) {

	mKeyLength = json.feed.entry.length;
 	
	for (var i = 0; i < mKeyLength; i++) {
		var entry = json.feed.entry[i];
		nameArray.push(entry["gsx$" +  p_prop].$t);
		keyArray.push(entry["gsx$" +  p_key].$t);
		wsidArray.push(entry["gsx$" +  p_wsid].$t);
	}
	//alert(keyArray);
	buildform();
}

function clearMap() {
	for (var i = 0; i < cm_mapMarkers.length; i++) {
		mapMarkers.pop();
	}
}
/**
 * Searches in the current project set for projects with "keyword" regular expression in the title or description fields and plots them.
 * @Param json - json worksheet feed
 * @Param searchword - string used to match text in project title and description
 */
function psearch(searchword) {
	//alert(searchon);
	if (searchOn == true) {
	for(var i = 0; i < (cm_mapMarkers.length - markerSL); i++) {
	      cm_map.removeOverlay(cm_mapMarkers.pop());
		//alert('marker popped');
		}
	searchon = false;
	}
	keyword = searchword;
 
 //alert("Searching for: " + keyword);

 //mapreset();
for (var j = 0; j < keyArray.length; j++) {
		searchBounds = new GLatLngBounds();
	cm_search(keyArray[j], wsidArray[j]);
		//cm_searchJSON(jsoncurrent);
	}
	
}

/**
 * Searches in the current project set for projects with "keyword" regular expression in the title or description fields and plots them.
 * @Param json - json worksheet feed
 * @Param searchword - string used to match text in project title and description
 */
function dsearch(searchword) {
	//alert(searchon);
	if (searchOn == true) {
	for(var i = 0; i < (cm_mapMarkers.length - markerSL); i++) {
	      cm_map.removeOverlay(cm_mapMarkers.pop());
		//alert('marker popped');
	}
	searchon = false;
	}
	depword = searchword;
 
 //alert("Searching for: " + keyword);

 //mapreset();
for (var j = 0; j < keyArray.length; j++) {
		depBounds = new GLatLngBounds();
	cm_Depsearch(keyArray[j], wsidArray[j]);
		//cm_searchJSON(jsoncurrent);
	}
	
}


function cm_searchJSON(json) {

 for (var i = 0; i < json.feed.entry.length; i++) {

   var entry = json.feed.entry[i];
   var found=false;
   //var bounds = new GLatLngBounds();
   var searchtext = "";

   if(entry["gsx$" + param_latColumn]) {
   
   /** Check title and description for keyword, not case sensitive  **/
    
    searchtext = (entry["gsx$"+param_titleColumn].$t + entry["gsx$"+param_descriptionColumn].$t + entry["gsx$"+ param_department].$t);    
    //if() {
    //	found=true;
    //}  
	
   /** Plot Marker on map for matching projects  **/
    	//alert(keyword + '     keyword');
 	var regexp=new RegExp(keyword, "im");
    if(searchtext.search(regexp) != -1) {
	
	if (searchOn != true) {
	markerSL = cm_mapMarkers.length;
	searchOn = true;
	}
	//alert(markerSL + searchon);
    
      var lat = parseFloat(entry["gsx$" + param_latColumn].$t);
      var lng = parseFloat(entry["gsx$" + param_lngColumn].$t);
      var point = new GLatLng(lat,lng);
      var html = "<div style='font-size:12px'>";
      html += "<strong>" + entry["gsx$"+param_titleColumn].$t + "</strong>";
      var label = entry["gsx$"+param_titleColumn].$t;
      var rank = 0;
      

      if(usingRank && entry["gsx$" + param_rankColumn]) {
        rank = parseInt(entry["gsx$"+param_rankColumn].$t);
      }
      if(entry["gsx$" + param_department]) {
        html += "<br/>" + "<b>Project Department: </b>" + entry["gsx$"+param_department].$t;
      }
      if(entry["gsx$" + param_descriptionColumn]) {
        html += "<br/>" + "<b>Project Description: </b>" + entry["gsx$"+param_descriptionColumn].$t;
      }

      if(entry["gsx$" + param_collaborators]) {
        html += "<br/>" + "<b>Collaborators: </b>" + entry["gsx$"+param_collaborators].$t;
      }

      if(entry["gsx$" + param_linkColumn]) {
	var temp = entry["gsx$" + param_linkColumn].$t;
	html += "<br/>" + "<b>Link: </b>" + '<a href=' + temp + '>' + temp + '</a>';
      }

      if(entry["gsx$" + param_extraInfo]) {
	var temp = entry["gsx$" + param_extraInfo].$t;
	html += "<br/>" + temp;
      }

      if(entry["gsx$" + param_imageColumn]) {
		var temp = entry["gsx$" + param_imageColumn].$t;
        html += "<br/>" + '<img src=' + temp + ' height=100 width=200 alt=ProjectImage/>'; // + entry["gsx$"+ pram_imageColumn].$t;
      }

      html += "</div>";
	var search = "true";
      // create the marker
      var marker = cm_createMarker(point,label,html,rank,search);
      cm_map.addOverlay(marker);
      cm_mapMarkers.push(marker);
      cm_mapHTMLS.push(html);
      searchBounds.extend(point);
	var wholestring;

	if(entry["gsx$" + param_extramarkers] && entry["gsx$"+ param_extramarkers].$t != null) {
        var wholestring = entry["gsx$"+ param_extramarkers].$t;
	var stringarray = wholestring.split(",");
	//alert(stringarray);
	var j = 0;
		while(j < stringarray.length)	{
		var lat1 = parseFloat(stringarray[j]);
		var lng1 = parseFloat(stringarray[j+1]);
		//alert(lat1 + '   ' + lng1)
		var point = new GLatLng(parseFloat(stringarray[j]),parseFloat(stringarray[j+1]));
        	var marker = cm_createMarker(point,label,html,rank,search);
        	cm_map.addOverlay(marker);
        	cm_mapMarkers.push(marker);
        	cm_mapHTMLS.push(html);
        	searchBounds.extend(point);
		j=j+2;
		}
	}

    }
   }

 }
    cm_map.setZoom(cm_map.getBoundsZoomLevel(searchBounds));
  cm_map.setCenter(searchBounds.getCenter());
}


function cm_DepsearchJSON(json) {

 for (var i = 0; i < json.feed.entry.length; i++) {

   var entry = json.feed.entry[i];
   var found=false;
   //var bounds = new GLatLngBounds();
   var searchtext = "";

   if(entry["gsx$" + param_latColumn]) {
   
   /** Check title and description for keyword, not case sensitive  **/
    
    searchtext = (entry["gsx$"+ param_department].$t);    
    //if() {
    //	found=true;
    //}  
	
   /** Plot Marker on map for matching projects  **/
    	//alert(keyword + '     keyword');
 	var regexp=new RegExp(depword, "im");
    if(searchtext.search(regexp) != -1) {
	
	if (searchOn != true) {
	markerSL = cm_mapMarkers.length;
	searchOn = true;
	}
	//alert(markerSL + searchon);
    
      var lat = parseFloat(entry["gsx$" + param_latColumn].$t);
      var lng = parseFloat(entry["gsx$" + param_lngColumn].$t);
      var point = new GLatLng(lat,lng);
      var html = "<div style='font-size:12px'>";
      html += "<strong>" + entry["gsx$"+param_titleColumn].$t + "</strong>";
      var label = entry["gsx$"+param_titleColumn].$t;
      var rank = 0;
      

      if(usingRank && entry["gsx$" + param_rankColumn]) {
        rank = parseInt(entry["gsx$"+param_rankColumn].$t);
      }
      if(entry["gsx$" + param_department]) {
        html += "<br/>" + "<b>Project Department: </b>" + entry["gsx$"+param_department].$t;
      }
      if(entry["gsx$" + param_descriptionColumn]) {
        html += "<br/>" + "<b>Project Description: </b>" + entry["gsx$"+param_descriptionColumn].$t;
      }

      if(entry["gsx$" + param_collaborators]) {
        html += "<br/>" + "<b>Collaborators: </b>" + entry["gsx$"+param_collaborators].$t;
      }

      if(entry["gsx$" + param_linkColumn]) {
	var temp = entry["gsx$" + param_linkColumn].$t;
	html += "<br/>" + "<b>Link: </b>" + '<a href=' + temp + '>' + temp + '</a>';
      }

      if(entry["gsx$" + param_extraInfo]) {
	var temp = entry["gsx$" + param_extraInfo].$t;
	html += "<br/>" + temp;
      }

      if(entry["gsx$" + param_imageColumn]) {
		var temp = entry["gsx$" + param_imageColumn].$t;
        html += "<br/>" + '<img src=' + temp + ' height=100 width=200 alt=ProjectImage/>'; // + entry["gsx$"+ pram_imageColumn].$t;
      }

      html += "</div>";
	var search = "dep";
      // create the marker
      var marker = cm_createMarker(point,label,html,rank,search);
      cm_map.addOverlay(marker);
      cm_mapMarkers.push(marker);
      cm_mapHTMLS.push(html);
      depBounds.extend(point);
	

	var wholestring;

	if(entry["gsx$" + param_extramarkers] && entry["gsx$"+ param_extramarkers].$t != null) {
        var wholestring = entry["gsx$"+ param_extramarkers].$t;
	var stringarray = wholestring.split(",");
	//alert(stringarray);
	var j = 0;
		while(j < stringarray.length)	{
		var lat1 = parseFloat(stringarray[j]);
		var lng1 = parseFloat(stringarray[j+1]);
		//alert(lat1 + '   ' + lng1)
		var point = new GLatLng(parseFloat(stringarray[j]),parseFloat(stringarray[j+1]));
        	var marker = cm_createMarker(point,label,html,rank,search);
        	cm_map.addOverlay(marker);
        	cm_mapMarkers.push(marker);
        	cm_mapHTMLS.push(html);
        	depBounds.extend(point);
		j=j+2;
		}
	}

    }
   }

 }
    cm_map.setZoom(cm_map.getBoundsZoomLevel(depBounds));
  cm_map.setCenter(depBounds.getCenter());
}


/**
 * Checks to see if the column matches and returns the value of the column if it does
 */
function getColumnVal(entry, columnName) {
  var columnVal = '';
  if (entry["gsx$" + columnName]) {
    columnVal = entry["gsx$" + columnName].$t;
  }
  return columnVal;
}

/**
 * Loads JSON feed for all spreadsheet Values
 */
function getMasterJson() {

  // Retrieve the JSON feed.
  var script = document.createElement('script');
  script.setAttribute('src', 'http://spreadsheets.google.com/feeds/'
                         + 'list' 
                         + '/' + param_MasterKey
                         + '/' + param_MasterwsID + '/public/values' +
                        '?alt=json-in-script&callback=setArray');
   
  script.setAttribute('id', 'jsonScript');
  script.setAttribute('type', 'text/javascript');
  document.documentElement.firstChild.appendChild(script);       //---------------------------------------two colons?

}

/**
 * Changes the spreadsheet key to load new research locations
 */
function keyChange(event) {

	param_ssKey = myselect.options[myselect.selectedIndex].value;
	//alert("Loading New Projects");
	cm_load();
}


/**
 * Builds the form fields and fills out the drop down list with project selections
 */
function buildform() {
 
  mypara=document.getElementById("formpara");
  //myform = document.createElement('form');
  myselect = document.createElement('select');

  var defaultOption = document.createElement('OPTION');
  defaultOption.appendChild(document.createTextNode("Choose A Project Set"));
  defaultOption.setAttribute("value", "");
  myselect.appendChild(defaultOption);


for (var i = 0; i < mKeyLength; i++) {
	var name = nameArray[i];
	var wsid = wsidArray[i];
	var key = keyArray[i];
	//alert(name + ' ' + key + ' ' + wsid);
    var myOption = document.createElement('OPTION');
    myOption.appendChild(document.createTextNode(name));
    myOption.setAttribute("value",key);
    myselect.appendChild(myOption);
	}

	myselect2 = document.createElement('select');
 	var defaultOption2 = document.createElement('OPTION');
  	defaultOption2.appendChild(document.createTextNode("Choose A Department Set"));
  	defaultOption2.setAttribute("value", "");
  	myselect2.appendChild(defaultOption2);
	var myOption2 = document.createElement('OPTION');
	myOption2.appendChild(document.createTextNode("Biology"));
	myOption2.setAttribute("value", "Biology");
	myselect2.appendChild(myOption2);
	var myOption3 = document.createElement('OPTION');
	myOption3.appendChild(document.createTextNode("Engineering"));
	myOption3.setAttribute("value", "Engineering");
	myselect2.appendChild(myOption3);
	var myOption4 = document.createElement('OPTION');
	myOption4.appendChild(document.createTextNode("Medicine"));
	myOption4.setAttribute("value", "Medicine");
	myselect2.appendChild(myOption4);
	var myOption5 = document.createElement('OPTION');
	myOption5.appendChild(document.createTextNode("Pharmacy"));
	myOption5.setAttribute("value", "Pharmacy");
	myselect2.appendChild(myOption5);
	var myOption6 = document.createElement('OPTION');
	myOption6.appendChild(document.createTextNode("Business"));
	myOption6.setAttribute("value", "Business");
	myselect2.appendChild(myOption6);

 
  /* Create the search text field and search button */

  mysearchfield = document.createElement('input');
  mysearchfield.type="text";
  mysearchfield.size=25;
  mysearchfield.value="Search for a project...";
mysearchfield.onKeyPress=function() { if(Key.keyCode()==13) 
					{ 
					trace("Key Pressed : Enter") 
					}
};

  mysearchbutton = document.createElement('input');
  mysearchbutton.type="button";
  mysearchbutton.value="Search";

  myclearbutton = document.createElement('input');
  myclearbutton.type="button";
  myclearbutton.value="Clear";

  myclearmapbutton = document.createElement('input');
  myclearmapbutton.type="button";
  myclearmapbutton.value="Clear Map";

  /* Append form elements to div */

  mypara.appendChild(myselect);
  mypara.appendChild(myselect2);
  mypara.appendChild(mysearchfield);
  mypara.appendChild(mysearchbutton);
  mypara.appendChild(myclearbutton);
  mypara.appendChild(myclearmapbutton);

  	myselect.onchange=keyChange;
	myselect2.onchange=function() { while(cm_mapMarkers.length > 0) 
			{ 
			cm_map.removeOverlay(cm_mapMarkers.pop());
			}
	dsearch(myselect2.value) 
	};
  mysearchbutton.onclick=function() { psearch(mysearchfield.value); }
  mysearchfield.on
				
  myclearbutton.onclick=function() { mysearchfield.value = "" };
  myclearmapbutton.onclick=function() {
	while(cm_mapMarkers.length > 0) { 
	cm_map.removeOverlay(cm_mapMarkers.pop());
	}
}

}






/** GOOGLE MAPS FUNCTIONS **/
 
/**
 * function to remove sidebar and start over
 */
function cm_remove() {
        var sidebar = document.getElementById('td');
        sidebar.parentNode.removeChild(sidebar);
        //alert('removed sidebar!');
}

/**
 * Loads map and calls function to load in worksheet data.
 */
function cm_load() {  
  if (GBrowserIsCompatible()) {
    // create the map
    cm_map = new GMap2(document.getElementById("cm_map"));
    cm_map.addControl(new GLargeMapControl());
    cm_map.addControl(new GMapTypeControl());
    cm_map.setMapType(G_SATELLITE_MAP);                          //----------------------------Sets default map view
    cm_map.enableScrollWheelZoom()
    cm_map.setCenter(new GLatLng( 43.907787,-79.359741), 2);
    cm_getJSON(param_ssKey, param_wsId);
  } else {
    alert("Sorry, the Google Maps API is not compatible with this browser");
  }
}

/**
 * Loads map and calls function to load in worksheet data.
 */
function cm_loadBlank() {  
  if (GBrowserIsCompatible()) {
    // create the map
    cm_map = new GMap2(document.getElementById("cm_map"));
    cm_mapMarkers = [];
    cm_map.addControl(new GLargeMapControl());
    cm_map.addControl(new GMapTypeControl());
    cm_map.setMapType(G_SATELLITE_MAP);                          //----------------------------Sets default map view
    cm_map.enableScrollWheelZoom()
    cm_map.setCenter(new GLatLng( 43.907787,-79.359741), 2);
  } else {
    alert("Sorry, the Google Maps API is not compatible with this browser");
  }
}

/**
 * Function called when marker on the map is clicked.
 * Opens an info window (bubble) above the marker.
 * @param {Number} markerNum Number of marker in global array
 */
function cm_markerClicked(markerNum) {
  cm_mapMarkers[markerNum].openInfoWindowHtml(cm_mapHTMLS[markerNum]);
}

/**
 * Function that sorts 2 worksheet rows from JSON feed
 * based on their rank column. Only called if column is defined.
 * @param {rowA} Object Represents row in JSON feed
 * @param {rowB} Object Represents row in JSON feed
 * @return {Number} Difference between row values

 *function cm_sortRows(rowA, rowB) {
 * var rowAValue = parseFloat(rowA["gsx$" + param_rankColumn].$t);
 * var rowBValue = parseFloat(rowB["gsx$" + param_rankColumn].$t);
*
 * return rowAValue - rowBValue;
*}

*/

/**
 * Called when JSON is loaded. Creates sidebar if param_sideBar is true.
 * Sorts rows if param_rankColumn is valid column. Iterates through worksheet rows,
 * creating marker and sidebar entries for each row.
 * @param {JSON} json Worksheet feed
 */      
function cm_loadMapJSON(json) {
  

  if(param_useSidebar == true) {
    var sidebarTD = document.createElement("td");
    sidebarTD.setAttribute("width","150");
    sidebarTD.setAttribute("valign","top");
    var sidebarDIV = document.createElement("div");
    sidebarDIV.id = "cm_sidebarDIV";
    sidebarDIV.style.overflow = "auto";
    sidebarDIV.style.height = "450px";
    sidebarDIV.style.fontSize = "11px";
    sidebarDIV.style.color = "#000000";
    sidebarTD.appendChild(sidebarDIV);
    document.getElementById("cm_mapTR").appendChild(sidebarTD);
  }

  var bounds = new GLatLngBounds(); 

  if(json.feed.entry[0]["gsx$" + param_rankColumn]) {
    usingRank = true;
    json.feed.entry.sort(cm_sortRows);
  }

  for (var i = 0; i < json.feed.entry.length; i++) {
    var entry = json.feed.entry[i];

    if(entry["gsx$" + param_latColumn]) {
      var lat = parseFloat(entry["gsx$" + param_latColumn].$t);
      var lng = parseFloat(entry["gsx$" + param_lngColumn].$t);
      var point = new GLatLng(lat,lng);
      var html = "<div style='font-size:12px'>";
      html += "<strong>" + entry["gsx$"+param_titleColumn].$t
              + "</strong>";
      var label = entry["gsx$"+param_titleColumn].$t;
      var rank = 0;
      if(usingRank && entry["gsx$" + param_rankColumn]) {
        rank = parseInt(entry["gsx$"+param_rankColumn].$t);
      }
      if(entry["gsx$" + param_department]) {
        html += "<br/>" + "<b>Project Department: </b>" + entry["gsx$"+param_department].$t;
      }
      if(entry["gsx$" + param_descriptionColumn]) {
        html += "<br/>" + "<b>Project Description: </b>" + entry["gsx$"+param_descriptionColumn].$t;
      }
      if(entry["gsx$" + param_collaborators]) {
        html += "<br/>" + "<b>Collaborators: </b>" + entry["gsx$"+param_collaborators].$t;
      }
      if(entry["gsx$" + param_linkColumn]) {
		var temp = entry["gsx$" + param_linkColumn].$t;
	html += "<br/>" + "<b>Link: </b>" + '<a href=' + temp + '>' + temp + '</a>';
      }
      if(entry["gsx$" + param_extraInfo]) {
		var temp = entry["gsx$" + param_extraInfo].$t;
	html += "<br/>" + temp;
      }
      //if(entry["gsx$" + param_imageDes]) {
      //  html += "<br/>" + entry["gsx$"+param_imageDes].$t;
      //}
      if(entry["gsx$" + param_imageColumn]) {
		var temp = entry["gsx$" + param_imageColumn].$t;
        html += "<br/>" + '<img src=' + temp + ' height=100 width=200 alt=ProjectImage/>'; // + entry["gsx$"+ pram_imageColumn].$t;
      }

      html += "</div>";
	var search = "false";
      // create the marker
      var marker = cm_createMarker(point,label,html,rank, search);
      cm_map.addOverlay(marker);
      cm_mapMarkers.push(marker);
      cm_mapHTMLS.push(html);
      bounds.extend(point);
 
      if(param_useSidebar == true) {
        var markerA = document.createElement("a");
        markerA.setAttribute("href","javascript:cm_markerClicked('" + i +"')");
        markerA.style.color = "#000000";
        var sidebarText= "";
        if(usingRank) {
          sidebarText += rank + ") ";
        }
        sidebarText += label;
        markerA.appendChild(document.createTextNode(sidebarText));
        sidebarDIV.appendChild(markerA);
        sidebarDIV.appendChild(document.createElement("br"));
        sidebarDIV.appendChild(document.createElement("br"));
      }
    }
  }

  cm_map.setZoom(cm_map.getBoundsZoomLevel(bounds));
  cm_map.setCenter(bounds.getCenter());

  jsoncurrent = json;
}

/**
 * Creates marker with ranked Icon or blank icon,
 * depending if rank is defined. Assigns onclick function.
 * @param {GLatLng} point Point to create marker at
 * @param {String} title Tooltip title to display for marker
 * @param {String} html HTML to display in InfoWindow
 * @param {Number} rank Number rank of marker, used in creating icon
 * @return {GMarker} Marker created
 */
function cm_createMarker(point, title, html, rank, search) {
  var markerOpts = {};
  var nIcon = new GIcon(cm_baseIcon);

  if(rank > 0 && rank < 100) {
    nIcon.imageOut = "http://gmaps-samples.googlecode.com/svn/trunk/" +
        "markers/" + param_iconType + "/marker" + rank + ".png";
    nIcon.imageOver = "http://gmaps-samples.googlecode.com/svn/trunk/" +
        "markers/" + param_iconOverType + "/marker" + rank + ".png";
    nIcon.image = nIcon.imageOut;
  } else if(search == "true") {
	nIcon.imageOut= "http://gmaps-samples.googlecode.com/svn/trunk/markers/red/blank.png";
	nIcon.imageOver = "http://gmaps-samples.googlecode.com/svn/trunk/markers/orange/blank.png";
	nIcon.image = nIcon.imageOut;
	}
 else if(search == "dep") {
	nIcon.imageOut= "http://gmaps-samples.googlecode.com/svn/trunk/markers/blue/blank.png";
	nIcon.imageOver = "http://gmaps-samples.googlecode.com/svn/trunk/markers/green/blank.png";
	nIcon.image = nIcon.imageOut;
	}	
	else {
    nIcon.imageOut = "http://gmaps-samples.googlecode.com/svn/trunk/" +
        "markers/" + param_iconType + "/blank.png";
    nIcon.imageOver = "http://gmaps-samples.googlecode.com/svn/trunk/" +
        "markers/" + param_iconOverType + "/blank.png";
    nIcon.image = nIcon.imageOut;
  }

  markerOpts.icon = nIcon;
  markerOpts.title = title;  
  var marker = new GMarker(point, markerOpts);
  GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml(html);
  });
  GEvent.addListener(marker, "mouseover", function() {
    marker.setImage(marker.getIcon().imageOver);
  });
  GEvent.addListener(marker, "mouseout", function() {
    marker.setImage(marker.getIcon().imageOut);
  });
  GEvent.addListener(marker, "infowindowopen", function() {
    marker.setImage(marker.getIcon().imageOver);
  });
  GEvent.addListener(marker, "infowindowclose", function() {
    marker.setImage(marker.getIcon().imageOut);
  });
  return marker;
}

/**
 * Creates a script tag in the page that loads in the
 * JSON feed for the specified key/ID.
 * Once loaded, it calls cm_loadMapJSON.
 */
function cm_getJSON(param_ssKey, param_wsid) {

  // Retrieve the JSON feed.
  var script = document.createElement('script');

  script.setAttribute('src', 'http://spreadsheets.google.com/feeds/list'
                         + '/' + param_ssKey + '/' + param_wsId + '/public/values' +
                        '?alt=json-in-script&callback=cm_loadMapJSON'); 


  script.setAttribute('id', 'jsonScript');
  script.setAttribute('type', 'text/javascript');
  document.documentElement.firstChild.appendChild(script);
}

/**
 * Creates a script tag in the page that loads in the
 * JSON feed for the specified key/ID.
 * Once loaded, it calls cm_loadMapJSON.
 */
function cm_search(param_ssKey, param_wsid) {

  // Retrieve the JSON feed.
  var script = document.createElement('script');

  script.setAttribute('src', 'http://spreadsheets.google.com/feeds/list'
                         + '/' + param_ssKey + '/' + param_wsId + '/public/values' +
                        '?alt=json-in-script&callback=cm_searchJSON'); 


  script.setAttribute('id', 'jsonScript');
  script.setAttribute('type', 'text/javascript');
  document.documentElement.firstChild.appendChild(script);
}

function cm_Depsearch(param_ssKey, param_wsid) {

  // Retrieve the JSON feed.
  var script = document.createElement('script');

  script.setAttribute('src', 'http://spreadsheets.google.com/feeds/list'
                         + '/' + param_ssKey + '/' + param_wsId + '/public/values' +
                        '?alt=json-in-script&callback=cm_DepsearchJSON'); 


  script.setAttribute('id', 'jsonScript');
  script.setAttribute('type', 'text/javascript');
  document.documentElement.firstChild.appendChild(script);
}
</script>

</head>

<body>

<!-- Area holds input fields - drop down, text, search, clear -->

<p id="formpara">

</p>

<!-- End input area -->

<!-- Start of GMaps Code -->

<div style="width:1500px; font-family:Arial, sans-serif; font-size:11px; border:1px solid black">
  <table id="cm_mapTABLE"> <tbody> <tr id="cm_mapTR">

    <td> <div id="cm_map" style="width:1495px; height:750px"></div> </td>
  </tr> </tbody></table>
</div>


<script type="text/javascript">

begin();

</script>


<script src="http://maps.google.com/maps?file=api&v=2&key="
  type="text/javascript"></script>

<script type="text/javascript">

/** GOOGLE MAPS VARIABLES **/

var cm_map;
var cm_mapMarkers = [];
var cm_mapHTMLS = [];

// Create a base icon for all of our markers that specifies the
// shadow, icon dimensions, etc.

var cm_baseIcon = new GIcon();
cm_baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
cm_baseIcon.iconSize = new GSize(20, 34);
cm_baseIcon.shadowSize = new GSize(37, 34);
cm_baseIcon.iconAnchor = new GPoint(9, 34);
cm_baseIcon.infoWindowAnchor = new GPoint(9, 2);
cm_baseIcon.infoShadowAnchor = new GPoint(18, 25);



setTimeout('cm_load()', 500);

</script>

</body> 

</html>

